@import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-button-buttonElevated';
@import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-element';
@import '../../styles.module';

$sizes: 'xs', 's', 'm', 'l';
$variants: 'icon-only';
$typography: ();

@mixin button-colors-styles {
  @include icon-fill(simple-var($theme-variables, 'sys', 'neutral', 'text-support'));

  background-color: simple-var($theme-variables, 'sys', 'neutral', 'background2-level');
  box-shadow: simple-var($theme-variables, 'box-shadow', 'elevation', 'level2');

  &:hover {
    @include icon-fill(simple-var($theme-variables, 'sys', 'neutral', 'text-main'));

    background-color: simple-var($theme-variables, 'sys', 'neutral', 'background2-level');
    box-shadow: simple-var($theme-variables, 'box-shadow', 'elevation', 'level3');
  }

  &:focus-visible {
    @include icon-fill(simple-var($theme-variables, 'sys', 'neutral', 'text-main'));

    background-color: simple-var($theme-variables, 'sys', 'neutral', 'background2-level');
    box-shadow: simple-var($theme-variables, 'box-shadow', 'elevation', 'level3');
  }

  &:active {
    @include icon-fill(simple-var($theme-variables, 'sys', 'neutral', 'text-support'));

    background-color: simple-var($theme-variables, 'sys', 'neutral', 'background');
    box-shadow: none;
  }

  &:disabled,
  &[data-disabled] {
    @include icon-fill(simple-var($theme-variables, 'sys', 'neutral', 'text-disabled'));

    background-color: simple-var($theme-variables, 'sys', 'neutral', 'decor-disabled');
    box-shadow: none;
  }

  &[data-loading] {
    @include icon-fill(simple-var($theme-variables, 'sys', 'neutral', 'text-main'));

    background-color: simple-var($theme-variables, 'sys', 'neutral', 'background');
    box-shadow: none;
  }
}

@mixin button-outline-colors-styles {
  &:focus-visible {
    @include outline-var($container-focused-s);

    outline-color: $sys-available-complementary;
  }
}

.button {
  @include button-anatomy-styles($button-elevated, $sizes, $variants, $typography, false);
  @include loading-label-only($button-elevated);
  @include button-colors-styles;
  @include button-outline-colors-styles;
}
